<template>
  <div>
    <div class="contentbox">
      <router-view></router-view>
    </div>
    <div>
      <van-tabbar
        class="menubox"
        v-model="active"
        @change="toindex(active)"
        inactive-color="grey"
      >
        <van-tabbar-item name="homepage">
          <span>首页</span>
          <template #icon="props">
            <icon-svg
              :icon-class="props.active ? 'home_blue' : 'home_gray'"
              icon-color="#304056"
              class="menuicon"
            ></icon-svg>
          </template>
        </van-tabbar-item>

        <van-tabbar-item name="groundpage">
          <span>广场</span>
          <template #icon="props">
            <icon-svg
              :icon-class="props.active ? 'ground_blue' : 'ground_gray'"
              icon-color="#304056"
              class="menuicon"
            ></icon-svg>
          </template>
        </van-tabbar-item>

        <van-tabbar-item name="marketpage">
          <span>商城</span>
          <template #icon="props">
            <icon-svg
              :icon-class="props.active ? 'market_blue' : 'market_gray'"
              icon-color="#304056"
              class="menuicon"
            ></icon-svg>
          </template>
        </van-tabbar-item>

        <van-tabbar-item name="personpage">
          <span>我的</span>
          <template #icon="props">
            <icon-svg
              :icon-class="props.active ? 'my_blue' : 'my_gray'"
              icon-color="#304056"
              class="menuicon"
            ></icon-svg>
          </template>
        </van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>
   
<script>
export default {
  data() {
    return {
      active: "homepage",
    };
  },
  methods: {
    toindex(value) {
      this.$router.push("/" + value);
      this.active = value;
    },
  },
  mounted() {
    this.active = this.$route.path.replace(/\//g, "");
  },
  watch: {
    // 监听路由变化
    $route(to) {
      this.toindex(to.path.replace(/\//g, ""));
    },
  },
};
</script>
   
<style scoped>
.contentbox {
  margin: 0;
  padding: 0;
}
.menubox {
  height: 60px;
}
.menuicon {
  width: 30px;
  height: 30px;
}
</style>